<template>
    <div class="listName" @click.stop>
        <div v-for="key in listSte" :class="{setClass:key.set,noSetClass:!key.set}" @click="change(key)" v-if="key.show">

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{key.name}}
            <div v-if="key.id==6&&key.set" style="line-height: 15px" @click.stop>（
                    <div style="display:inline-block" :class="{setClass:listName[13].set,noSetClass:!listName[13].set}" @click="change(listName[13])">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{listName[13].name}}&nbsp;&nbsp;</div>）
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                listName:[]
            }
        },
        props:['data'],
        computed:{
            listSte:function () {
                let arr=[];
                this.listName.forEach((key)=>{
                    if(key.id==7||key.id==9||key.id==10||key.id==11){
                        arr.push({
                            id: key.id,
                            name: key.name,
                            set: key.set,
                            show:false
                        })
                    }else if(key.id==14){
                    }else{
                        arr.push({
                            id: key.id,
                            name: key.name,
                            set: key.set,
                            show:true
                        })
                    }
                });
                return arr;
            }
        },
        mounted:function () {
            this.listName=this.data;
        },
        updated:function () {
            this.$emit('crContent',this.listName)
        },
        methods:{
            change:function (val) {
                for(let i=0;i<this.listName.length;i++){
                    if(this.listName[i].id==val.id){
                        this.listName[i].set=!this.listName[i].set;
                    }
                }
            }
        }
    }
</script>
<style scoped>
    .noSetClass{
        background: url("./../../actual/publicImg/set0.png") no-repeat;
        background-position: 2px ;
    }
    .setClass{
        background: url("./../../actual/publicImg/set1.png") no-repeat;
        background-position: 2px;
    }
    .listName{
        display:flex;
        flex-wrap:wrap;
        position: absolute;
        top:20px;
        z-index: 5;
        padding:10px 10px 10px 10px;
        background-color:#122038;
    }
    .listName>div{
        display: flex;
        font-size:12px;
        color: white;
        padding: 5px 10px 5px 0px;
    }
</style>